<template>
  <el-container class="main-container">
    <!--头部-->
    <el-header height="45px">
      <span class="header-item">经费管理系统</span>

      <el-link class="list-top-item2" style="color: white" :underline="false" @click="toMainList">收支情况</el-link>

      <el-link class="list-top-item2" style="color: white" :underline="false" @click="toHistoryList">收支历史</el-link>

      <el-link class="list-top-item" style="color: white" :underline="false" @click="toComparedList">收支对比</el-link>

      <div class="right-top">
        <el-link class="list-top-item3" style="color: white" :underline="false" @click="toUserList">用户管理 </el-link>

        <el-dropdown>
          <span class="el-dropdown-link"><i class="el-icon-user-solid"></i><span class="el-dropdown-link2">{{ this.$store.state.user.loginName }} </span></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-switch-button" @click.native="logout">退出/注销</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>
    </el-header>

    <el-container>
      <el-aside style="width: 15%" class="left-group"></el-aside>

      <!--主要内容-->
      <el-main>
        <div>
          <!--面包屑-->
          <el-breadcrumb separator="/" class="users-breadcrumb">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>收支对比</el-breadcrumb-item>
          </el-breadcrumb>

          <div id="comparedChart" style="margin-left: 8%;margin-top: 2%" :style="{width: '800px', height: '600px'}"></div>

        </div>
      </el-main>

      <el-aside style="width: 15%" class="right-group"></el-aside>
    </el-container>
  </el-container>
</template>

<script>
import axios from 'axios'
import {logout} from "@/api/login";

export default {
  name: "comparedList",

  mounted() {
    // 基于准备好的dom，初始化echarts实例
    let comparedChart = this.$echarts.init(document.getElementById('comparedChart'))
    // 绘制图表
    comparedChart.setOption({
      title: {
        text: '收支对比情况',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      toolbox: {
        show: true,
        feature: {
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '李津',
          type: 'pie',
          radius: '50%',
          // data: response.data.sort(function (a, b) { return a.value - b.value; }),
                      data: [
                        {
                          value: 800, name: '支出金额',
                          itemStyle: {
                            color: "#ce3b3b"
                          }
                        },
                        {
                          value: 1048, name: '收入金额',
                          itemStyle: {
                            color: "#252047"
                          }
                        }
                      ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
/*    let _this = this
    const url = 'http://localhost:8088/finance-info/Compared'*/
/*
    axios.get(url).then(function (response) {
      // 基于准备好的dom，初始化echarts实例
      let comparedChart = _this.$echarts.init(document.getElementById('comparedChart'))
      // 绘制图表
      comparedChart.setOption({
        title: {
          text: '收支对比情况',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          show: true,
          feature: {
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '李津',
            type: 'pie',
            radius: '50%',
            data: response.data.sort(function (a, b) { return a.value - b.value; }),
            /!*            data: [
                          {
                            value: 800, name: '支出金额',
                            itemStyle: {
                              color: "#ce3b3b"
                            }
                          },
                          {
                            value: 1048, name: '收入金额',
                            itemStyle: {
                              color: "#252047"
                            }
                          }
                        ],*!/
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    })
*/

  },
  data(){
    return {
      activeIndex: ''
    }
  },

  methods: {
    toUserList () {
      this.$router.push({ path: '/user' })
    },

    toMainList () {
      this.$router.push({ path: '/main' })
    },

    toHistoryList () {
      this.$router.push({ path: '/history' })
    },

    toComparedList () {
      this.$router.push({ path: '/compared' })
    },

    //退出登陆
    async logout () {
      const res = await this.$confirm('此操作将退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出登入'
        })
      })
      if (res === 'confirm') {
        this.$store.commit('REMOVE_INFO')
        logout().then(resp => {
          if (resp) {
            // window.sessionStorage.clear()
            this.$router.push('/login')
          }
        })
      }
    },
  }
}


</script>

<style>
.el-header {
  background-color: #252047;
  color: #333;
  width: 100%;
}

.main-container{
  height: 100%;
}

.header-item{
  float: left;
  line-height: 45px;
  font-size: 22px;
  color: white;
  width: 14%;
  text-align: center;
}

.list-top-item3{
  font-size: 15px;
  color: white;
  width: 80px;
  text-align: center;
  line-height:45px;
}

.right-top{
  height: 42px;
  background-color: #252047;
  float: right;
  margin-right: 10%;
}


.el-dropdown-link {
  cursor: pointer;
  color: white;
  font-size: 25px;
  text-align: center;
  line-height:45px;
}

.el-dropdown-link2 {
  cursor: pointer;
  color: white;
  font-size: 13px;
  text-align: center;
  line-height:45px;
  margin-left: 2px;
}

.left-group, .right-group{
  background-color: #c9d3e7;
}

.list-top-item{
  background-color: red;
  font-size: 15px;
  color: white;
  width: 8%;
  text-align:center;
  line-height:45px;
}

.list-top-item2{
  font-size: 15px;
  color: white;
  width: 8%;
  text-align: center;
  line-height:35px;
}


</style>